<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图书管理</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" type="text/css" href="/assets/element-plus/index.css">
    <!-- 引入组件库 -->
    <script src="/assets/vue/vue.global.js"></script>
    <script src="/assets/element-plus/index.full.js"></script>
    <script src="/assets/axios/axios.js"></script>
    <script src="/assets/wang-editor/wangEditor.min.js"></script>

    <style>

        .info .el-col, .info .el-select, .info .el-input {
            padding-top: 5px;
            padding-bottom: 5px;
        }
    </style>
</head>
<body>
<div id="app">
    <h2>图书管理</h2>
    <!-- 新增图书按钮 -->
    <el-button type="primary" @click="createBook">新增图书</el-button>
    <!--    <el-button type="primary" v-on:click="createBook">新增图书</el-button>-->
    <!-- 数据表 -->
    <el-table
            ref="singleTable"
            :data="tableData"
            highlight-current-row
            style="width: 100%">
        <el-table-column
                property="categoryName"
                label="分类"
                width="100">
        </el-table-column>
        <el-table-column
                property="bookName"
                label="书名"
                width="300">
        </el-table-column>
        <el-table-column
                property="subTitle"
                label="子标题"
                width="300">
        </el-table-column>
        <el-table-column
                property="author"
                label="作者"
                width="300">
        </el-table-column>
        <el-table-column
                label="操作"
                width="100">
            <template #default="scope">
                <el-button type="text" size="small" @click="onEdit(scope.row)">修改</el-button>
                <el-button type="text" size="small" @click="onDelete(scope.row)">删除</el-button>

            </template>
        </el-table-column>

    </el-table>
    <!-- 分页组件 -->
    <el-pagination
            background
            layout="prev, pager, next"
            :total="count"
            :current-page="page"
            @current-change="changePage">
    </el-pagination>
    <!-- 新增/修改图书表单 -->
    <el-dialog :title="dialogTitle" v-model="dialogFormVisible" width="800px" top="5vh" center>
        <div class="info">
            <el-form :model="form" ref="bookForm" :rules="rules">
                <!-- 类别下拉框 -->
                <el-form-item prop="category" label-width="0px">
                    <el-select v-model="form.categoryId" placeholder="请选择类型" style="width: 100%">
                        <el-option label="前端" value="1"></el-option>
                        <el-option label="后端" value="2"></el-option>
                        <el-option label="测试" value="3"></el-option>
                        <el-option label="产品" value="4"></el-option>
                    </el-select>
                </el-form-item>
                <!-- 书名 -->
                <el-form-item prop="bookName" label-width="0px">
                    <el-input v-model="form.bookName" placeholder="请输入书名" autocomplete="off"></el-input>
                </el-form-item>
                <!-- 子标题 -->
                <el-form-item prop="subTitle" label-width="0px">
                    <el-input v-model="form.subTitle" placeholder="请输入子标题" autocomplete="off"></el-input>
                </el-form-item>
                <!-- 作者 -->
                <el-form-item prop="author" label-width="0px">
                    <el-input v-model="form.author" placeholder="请输入作者" autocomplete="off"></el-input>
                </el-form-item>
                <!-- wangEditor容器 -->
                <div ref="editor" style="width: 100%"></div>
            </el-form>
            <span class="dialog-footer">
                <!-- 提交按钮 -->
              <el-button type="primary" v-on:click="onSubmit('bookForm')" style="width: 100%">确认提交</el-button>
            </span>
        </div>
    </el-dialog>
</div>

<script>
    let editor;
    const Main = {
        data() {
            return {
                dialogFormVisible: true //控制表单是否显示
                , dialogModel: "create" //表单提交模式 create-新增,update-修改
                , dialogTitle: "" //表单标题
                , form: { //表单数据
                    categoryId: "" //分类编号
                    , bookName: "" //书名
                    , subTitle: ""//子标题
                    , author: "" //作者
                    , description: "" //描述
                }
                , formLabelWidth: '120px' //表单文本宽度
                , tableData: [{}] //图书分页数据
                , count: 0 //记录总数
                , page: 1 //当前页码
                , pageCount: 0 //总页数
                , rules: { //校验规则
                    bookName: [
                        {required: true, message: '请输入书名', trigger: 'blur'}
                    ],
                    subTitle: [
                        {required: true, message: '请输入子标题', trigger: 'blur'}
                    ],
                    author: [
                        {required: true, message: '请输入作者', trigger: 'blur'}
                    ]
                }
            }
        }
        , methods: {
            //显示新增/修改图书对话框
            //model : create-新增图书 ,update-更新图书
            //data : 当模式为update时,代表表单原始数据
            showDialog(model, data) {
                this.dialogModel = model;
                if (model == "create") {
                    this.dialogTitle = "新增图书";
                    this.form.categoryId = "1";
                    this.form.bookName = "";
                    this.form.subTitle = "";
                    this.form.author = "";
                    this.form.description = "";
                    this.dialogFormVisible = true;
                } else if (model == "update") {
                    if (data != null) {
                        this.dialogTitle = "更新图书";
                        this.form = data;
                        this.form.categoryId = this.form.categoryId.toString();
                        this.dialogFormVisible = true;
                    }
                }
                //实例化wangEditor富文本编辑器
                editor = new wangEditor(this.$refs.editor);
                //设置上传图片的地址
                editor.customConfig.uploadImgServer = '/api/management/book/upload';//设置图片上传地址
                //默认上传时使用的参数名
                editor.customConfig.uploadFileName = 'img';//设置图片上传参数
                editor.create();//创建wangEditor
                //设置初始内容
                editor.txt.html(this.form.description);
            }
            , createBook() { //点击新增按钮,显示"新增图书"表单
                this.showDialog("create");
            }
            , onEdit: function (row) {
                if (row != null) {
                    //点击修改按钮,显示"修改图书"表单
                    //row代表当前行数据
                    this.showDialog("update", row);
                }
            }
            , onDelete: function (row) {
                const objApp = this;
                this.$confirm("确定要删除[" + row.bookName + "]吗？", '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: "warning"
                }).then(() => {
                    //处理删除操作
                    const  params=new URLSearchParams();
                    params.append("bookId",row.bookId);
                    axios.post("/api/management/book/delete",params)
                    .then(function (response){
                        const json = response.data;
                        if (json.code=="0"){
                            objApp.changePage(objApp.page);
                            ElementPlus.ElMessage.success({
                                message:"数据已删除",
                                type:"success"
                            })
                        }else {
                            console.error(json);
                            ElementPlus.ElMessage.error({
                                message:json.message,
                                type:"error"
                            })
                        }
                    })
                });
            }
            , onSubmit: function (formName) {
                const objApp = this;
                const formData = this.form;
                this.$refs[formName].validate(function (valid) {
                    if (valid) {
                        //表单提交处理
                        const description = editor.txt.html();
                        const params = new URLSearchParams();
                        if (objApp.dialogModel == "update") {
                            params.append("bookId", objApp.form.bookId);
                        }
                        params.append("categoryId", objApp.form.categoryId);
                        params.append("subTitle", objApp.form.subTitle);
                        params.append("description", description);
                        params.append("bookName", objApp.form.bookName);
                        params.append("author", objApp.form.author);
                        axios.post("/api/management/book/" + objApp.dialogModel, params)
                            .then(function (response) {
                                const json = response.data;
                                if (json.code == "0") {
                                    ElementPlus.ElMessage.success({
                                        message: "数据处理成功",
                                        type: "success"
                                    })
                                    objApp.dialogFormVisible = false;
                                    if (objApp.dialogModel == "create") {
                                        objApp.changePage(objApp.pageCount);
                                    } else if (objApp.dialogModel == "update") {
                                        objApp.changePage(objApp.page);
                                    }
                                } else {
                                    console.error(json);
                                    ElementPlus.ElMessage.error({
                                        message: json.message,
                                        type: "error"
                                    })
                                }
                            })
                    }
                });
            }
            , changePage(page) {
                //显示第几页数据
                const objApp = this;
                axios.get("/api/management/book/list?page=" + page)
                    .then(function (response) {
                        const json = response.data;
                        if (json.code == "0") {
                            const bookList = json.data.list;
                            objApp.tableData.splice(0, objApp.tableData.length);
                            bookList.forEach(function (item) {
                                objApp.tableData.push(item);
                            });
                            objApp.count = json.data.count;
                            objApp.page = page;
                            if (json.data.count % 10 == 0) {
                                objApp.pageCount = Math.trunc(json.data.count / 10);
                            } else {
                                objApp.pageCount = Math.trunc(json.data.count / 10) + 1;
                            }

                        } else {
                            console.error(json);
                        }
                    })
            }

        }
        , mounted() {
            this.dialogFormVisible = false;
            const objApp = this;
            this.changePage(1);
        }
    };
    const app = Vue.createApp(Main);
    app.use(ElementPlus);
    app.mount("#app")
</script>

</body>
</html>